<template>
  <div class="index">
    <div class="flex">
      <ElCarousel
        v-if="getSwiperData.enabled"
        class="w-[750px] flex-none mr-5"
        trigger="click"
        height="340px"
      >
        <ElCarouselItem v-for="item in getSwiperData.data" :key="item">
          <NuxtLink :to="item.link.path" target="_blank">
            <ElImage
              class="w-full h-full rounded-[8px] bg-white overflow-hidden"
              :src="appStore.getImageUrl(item.image)"
              fit="contain"
            />
          </NuxtLink>
        </ElCarouselItem>
      </ElCarousel>
      <InformationCard
        link="/information/new"
        class="flex-1 min-w-0"
        header="最新文章"
        :data="pageData.new"
        :show-time="false"
      />
    </div>
    <div class="mt-5 flex">
      <InformationCard
        link="/information"
        class="w-[750px] flex-none mr-5"
        header="全部文章"
        :data="pageData.all"
        :only-title="false"
      />
      <InformationCard
        link="/information/hot"
        class="flex-1"
        header="热门文章"
        :data="pageData.hot"
        :only-title="false"
        image-size="mini"
        :show-author="false"
        :show-desc="false"
        :show-click="false"
        :border="false"
        :title-line="2"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElCarousel, ElCarouselItem, ElImage } from "element-plus";
import { getIndex } from "@/api/shop";
import { useAppStore } from "~~/stores/app";
const appStore = useAppStore();
const { data: pageData } = await useAsyncData(() => getIndex(), {
  default: () => ({
    all: [],
    hot: [],
    new: [],
    pages: [],
  }),
});

const getSwiperData = computed(() => {
  try {
    const data = JSON.parse(pageData.value.pages);
    return data.find((item) => item.name === "banner")?.content;
  } catch (error) {
    return {};
  }
});
</script>
<style lang="scss" scoped></style>
